<template>
	<view>
		<view class="spot_lists" v-for="(item,index) in spotList" :key="index" @click="spotInformationHandle(item.id)">
			<view class="spot_list">
				<image class="spot_image" :src="item.spotImage1"></image>
				<view class="spot_name">{{ item.spotName }}</view>
				<view class="spot_introduction">{{ item.spotIntroduction }}</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	import eventBus from '@/js/eventBus.js'
	import httpTypes from '@/js/http-types.js'
	//网络请求
	export default{
		data(){
			return{
				//获取后台数据 1.声明存储数据的方式
				//获取到的数据不止一个，所以是数组类型
				spotList:[],
				queryInfo: {
					current: 1,
				    size: 6,
				    spotName: ""
				}
			}
		},
		//获取后台数据 2.声明一个 mounted 的周期函数
		//在这里获取数据,写一个网络请求
		mounted() {
			this.pageQuerySpotList()
			eventBus.$on('search',target => {
				this.queryInfo.spotName = target
				this.pageQuerySpotList()
			})
		},
		//实现跳转事件
		methods:{
			spotInformationHandle(id){
				uni.navigateTo({
					url: "/pages/spot/spot/spot?id=" + id   //注意最开始"/"
				});
			},
			pageQuerySpotList() {
				httpTypes.request({
					url: '/admin/spot/pageQuerySpotList',//接口地址
					data: this.queryInfo,
					//success 代表网络请求之后的结果
					success:(res) => {
						this.spotList = res.data.data.SpotList;
					}
				})
			}
		}
	}
</script>

<style lang="scss">	
	.spot_lists{
		display: flex;                        //弹性盒子模型
		box-sizing: border-box;               //为了盒子模型不撑开容器本身大小
		flex-direction: row;                  //横向布局
		flex-wrap: wrap;                      //横向排列
		padding: 15px 10px;                   //上下15px  左右10px
		width: 50%;
		.spot_list{
			width: 100%;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;               //内容水平居中
			margin-bottom: 15px;              //距离底部距离
			background-color:#007D8A;
			border-radius: 15px;
			box-shadow: 10px 10px 5px #888888;
			margin: 0  20px;
			.spot_image{
				margin-top: 10px;
				width: 120px;
				height: 80px;
			}
			//景点名称
			.spot_name{
				font-family: "楷体";
				font-size: 20px;
			}
			//景点简介
			.spot_introduction{
				margin: 5px 15px 10px 15px;
				width: 80%;
				font-size: 8px;
				white-space: nowrap;
				text-overflow: ellipsis;      //如文本过多用...显示
				overflow: hidden;
			}
		}
	} 
</style>
